<template>
	<view>
		<view v-if="isShow" class="time_mask" :class="{'uni-timer-mask-show':timeMaskShow}"></view>
		<view v-if="isShow" class="yx_time_slot" :class="{'fadelogIn1':timeMaskShow}">
			<view class="time_top_box">
				<view class="time_close" @click="close">取消</view>
				<view class="time_text">{{title}}</view>
				<view class="time_comfirm" @click="confirm">确认</view>
			</view>
			<view class="typelist">
				<view class="typeobj" :class="{'typeobj_hover':typeIndex==index}" v-for="(item,index) in typeList"
					:key="index" @click="handleType(index)">
					<view class="text">{{item}}</view>
					<view class="line"></view>
				</view>
			</view>
			<!-- 时间选择 -->
			<view class="yx_timer_sel">
				<swiper class="sel_swiper" :current="typeIndex">
					<swiper-item>
						<view>
							<picker-view :value="startvalue" :indicator-style="indicatorStyle" @change="bindstartChange"
								class="sel_swiper-item">
								<picker-view-column>
									<template v-for="(item,index) in timeHour">
										<view class="item" v-if="item>7&&item<21" :key="index">{{item}}时</view>
									</template>
								</picker-view-column>
								<picker-view-column>
									<template v-for="(item,index) in timeMin">
										<template v-if="startTime.h==0">
											<view class="item" :key="index" v-if="item>29">{{item}}分</view>
										</template>
										<view class="item" :key="index" v-else>{{item}}分</view>
									</template>
								</picker-view-column>
							</picker-view>
						</view>
					</swiper-item>
					<swiper-item>
						<view>
							<picker-view :value="endvalue" :indicator-style="indicatorStyle" @change="bindendChange"
								class="sel_swiper-item">
								<picker-view-column>
									<template v-for="(item,index) in timeHour">
										<view class="item" v-if="item>7&&item<21" :key="index">{{item}}时</view>
									</template>
								</picker-view-column>
								<picker-view-column>
									<template v-for="(item,index) in timeMin">
										<template v-if="endTime.h==0">
											<view class="item" :key="index" v-if="item>29">{{item}}分</view>
										</template>
										<view class="item" :key="index" v-else>{{item}}分</view>
									</template>
								</picker-view-column>
							</picker-view>
						</view>
					</swiper-item>
				</swiper>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "time_slot",
		props: {
			title: {
				type: String,
				default: () => {
					return "选择时间段";
				}
			},
		},
		data() {
			return {
				startTime: {
					h: 0,
					m: 0
				},
				endTime: {
					h: 0,
					m: 0
				},
				oldStartTime: {
					h: 1,
					m: 0
				},
				oldEndTime: {
					h: 1,
					m: 0
				},
				timeMaskShow: false, //遮罩
				isShow: false, //显示
				typeList: ["开始时间", "结束时间"],
				typeIndex: 0, //下标
				startvalue: [1, 0], //默认下标，14时 00分
				endvalue: [1, 0], //默认下标，15时 00分
				indicatorStyle: 'height: 50px;',
				// timeList:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23],
				timeHour: [],
				timeMin: [], //分钟可选项
			};
		},
		mounted() {
			//获取时分
			let timeHour = []
			let timeMin = []
			for (let i = 0; i < 24; i++) {
				timeHour.push(this.formatNumber(i))
			}
			for (let i = 0; i < 60; i++) {
				timeMin.push(this.formatNumber(i))
			}
			this.timeHour = timeHour
			this.timeMin = timeMin
		},
		methods: {
			//看看是不是有两位数
			formatNumber(n) {
				n = n.toString()
				return n[1] ? n : '0' + n
			},
			//开始选择
			bindstartChange(e) {
				const startTime = e.detail.value
				if (startTime[0] == 0) {
					startTime[1] = startTime[1] > 30 ? startTime[1] - 30 : this.oldStartTime.h == 0 ? startTime[1] : 0
				} else if (this.oldStartTime.h == 0) {
					startTime[1] = startTime[1] + 30
				}
				this.startTime.h = startTime[0]
				this.startTime.m = startTime[1]
				this.startvalue = startTime
				this.oldStartTime.h = startTime[0]
				this.oldStartTime.m = startTime[1]
			},
			//结束选择
			bindendChange(e) {
				const endTime = e.detail.value
				if (endTime[0] == 0) {
					endTime[1] = endTime[1] > 30 ? endTime[1] - 30 : this.oldEndTime.h == 0 ? endTime[1] : 0
				} else if (this.oldEndTime.h == 0) {
					endTime[1] = endTime[1] + 30
				}
				this.endTime.h = endTime[0]
				this.endTime.m = endTime[1]
				this.endvalue = endTime
				this.oldEndTime.h = endTime[0]
				this.oldEndTime.m = endTime[1]
			},
			/**
			 * 关闭弹窗
			 */
			close() {
				this.timeMaskShow = false
				this.$nextTick(() => {
					setTimeout(() => {
						this.isShow = false
						this.$emit('close')
					}, 300)
				})
			},
			/**
			 * 确认按钮
			 */
			confirm() {
				if (this.typeIndex == 0) {
					this.endvalue = [this.startvalue[0] + 1, 0]
					this.typeIndex = 1
					console.log(this.endvalue);
					this.endTime.h = this.endvalue[0]
					this.endTime.m = this.endvalue[1]
				} else {
					if (this.startvalue[0] < this.endvalue[0] || (this.startvalue[0] == this.endvalue[0] && this
							.startvalue[1] < this.endvalue[1])) {
						if (this.startvalue[0] == 0) {
							this.startvalue[1]
						}

						const timeObj = {
							start: {
								hour: this.timeHour[this.startvalue[0] + 8],
								min: this.startvalue[0] == 0 ? this.startvalue[1] + 30 : this.timeMin[this.startvalue[
									1]]
							},
							end: {
								hour: this.timeHour[this.endvalue[0] + 8],
								min: this.endvalue[0] == 0 ? this.endvalue[1] + 30 : this.timeMin[this.endvalue[1]]
							}
						}
						// var obj = {
						// 	start: {
						// 		hour: this.timeHour[this.startvalue[0]],
						// 		min: this.timeMin[this.startvalue[1]]
						// 	},
						// 	end: {
						// 		hour: this.timeHour[this.endvalue[0]],
						// 		min: this.timeMin[this.endvalue[1]]
						// 	}
						// }
						this.$emit('confirm', timeObj)
						this.close()
					} else {
						uni.showToast({
							icon: "error",
							title: "结束时间要大于开始时间"
						})
					}

				}
			},
			/**
			 * 打开日历弹窗
			 */
			open() {
				this.typeIndex = 0
				this.isShow = true
				this.startTime.h = this.startvalue[0]
				this.startTime.m = this.startvalue[1]
				this.endTime.h = this.endvalue[0]
				this.endTime.m = this.endvalue[1]
				console.log(this.startvalue, this.endvalue);
				this.$nextTick(() => {
					setTimeout(() => {
						this.timeMaskShow = true
					}, 50)
				})
			},
			//栏目选择
			handleType(index) {
				if (index != this.typeIndex) {
					if (index == 1) {
						this.endvalue = [this.startvalue[0] + 1, 0]
					}
					this.typeIndex = index
				}
			}

		}
	};
</script>

<style lang="scss" scoped>
	.time_mask {
		position: fixed;
		bottom: 0;
		top: 0;
		left: 0;
		right: 0;
		background-color: $uni-bg-color-mask;
		transition-property: opacity;
		transition-duration: 0.3s;
		opacity: 0;
		/* #ifndef APP-NVUE */
		z-index: 99;
		/* #endif */
	}

	.yx_time_slot {
		background-color: #FFFFFF;
		width: 100%;
		height: 750rpx;
		position: fixed;
		bottom: calc(var(--window-bottom));
		left: 0;
		right: 0;
		z-index: 99;
		transition-property: transform;
		transition-duration: 0.3s;
		transform: translateY(460px);

		.time_top_box {
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.time_close,
			.time_comfirm {
				width: 100rpx;
				color: #999999;
				font-size: 28rpx;
				font-weight: 400;
				text-align: center;
			}

			.time_comfirm {
				color: #4360F7;
			}

			.time_text {
				flex: 1;
				font-size: 30rpx;
				font-weight: 800;
				text-align: center;
			}
		}
	}

	.uni-timer-mask-show {
		opacity: 1;
	}

	/* 从下往上弹窗动画 */
	.fadelogIn1 {
		// -webkit-animation: fadelogIn 0.5s;
		// animation: fadelogIn 0.5s;
		transform: translateY(0);
	}

	.typelist {
		width: 100%;
		height: 70rpx;
		display: flex;
		align-items: center;

		.typeobj {
			width: 158rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.text {
				height: 65rpx;
				line-height: 65rpx;
				font-size: 28rpx;
				color: #333333;
			}

			.line {
				width: 1rpx;
				height: 5rpx;
			}
		}

		.typeobj_hover {
			.text {
				font-weight: 600;
			}

			.line {
				width: 88rpx;
				transition: width .5s;
				background-color: #4360F7;
			}
		}
	}

	.yx_timer_sel {
		width: 100%;
		margin-top: 38rpx;

		.sel_swiper {
			// width: 80%;
			// margin: 0 auto;
			height: 500rpx;
		}

		.sel_swiper-item {
			height: 500rpx;

			.item {
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
			}
		}
	}
</style>